import React, { useEffect } from 'react'
import Taro , { useRouter } from '@tarojs/taro'
import { View, Text, Image, ScrollView } from '@tarojs/components'
import { useImmer } from 'use-immer'
import S from '@/spx'
import { SearchBar } from '../../components'
import { SpNote, BackToTop, Loading } from '@/components'
import { pickBy } from '@/utils'
import doc from '@/doc'
import api from '@/api'

//import '../../font/iconfont.scss'
import './index2.scss'

const initialState = {
  list: [],
  val: '' //搜索框
}

function MakeComment(props) {
  const [state, setState] = useImmer(initialState)
  const router = useRouter()

  useEffect(() => {
    initHandle()
  })

  const initHandle = async () => {
    let { num } = router.params
    let data = {
      type: 'reply'
    }
    if (num) {
      let { type } = await api.mdugc.messagesetTohasRead(data)
    }
    // this.nextPage()
  }

  // 列表
  const fetch = async (params) => {
    const { page_no: page, page_size: pageSize } = params
    params = {
      page,
      pageSize,
      type: 'reply'
    }
    const { list, total_count: total } = await api.mdugc.messagelist(params)

    const nList = pickBy(list, doc.mdugc.MAKE_COLLECTION_LIST)
    setState((draft) => {
      draft.list = [...state.list, ...nList]
    })

    return { total }
  }
  const topages = (url) => {
    Taro.navigateTo({ url })
  }

  const { list, page, showBackToTop, scrollTop } = state
  return (
    <View className='comment'>
      <View className='comment_list'>
        <ScrollView
          scrollY
          className='comment_list__scroll'
          scrollTop={scrollTop}
          scrollWithAnimation
          onScroll={handleScroll}
          onScrollToLower={nextPage}
        >
          <View className='comment_list__scroll_scrolls'>
            {list?.map((item) => {
              return (
                <View
                  className='comment_list__scroll_scrolls_item'
                  onClick={topages.bind(
                    this,
                    `/mdugc/pages/make_details/index?item_id=${item.post_id}`
                  )}
                  key={item.post_id}
                >
                  <View className='comment_list__scroll_scrolls_item_l'>
                    <Image
                      className='comment_list__scroll_scrolls_item_l_img'
                      mode='aspectFill'
                      src={item.from_userInfo.avatar}
                    />
                  </View>
                  <View className='comment_list__scroll_scrolls_item_cen'>
                    <View className='comment_list__scroll_scrolls_item_cen_title'>
                      {item.from_nickname}
                    </View>
                    <View className='comment_list__scroll_scrolls_item_cen_text'>
                      <View className='comment_list__scroll_scrolls_item_cen_text_word'>
                        {item.title}：{item.content}
                      </View>
                      <View className='comment_list__scroll_scrolls_item_cen_text_time'>
                        {item.time}
                      </View>
                    </View>
                  </View>
                  <View className='comment_list__scroll_scrolls_item_r'>
                    <Image
                      className='comment_list__scroll_scrolls_item_r_img'
                      mode='aspectFill'
                      src={item.postInfo.cover}
                    />
                  </View>
                </View>
              )
            })}
          </View>
          {page.isLoading && <Loading>正在加载...</Loading>}
          {!page.isLoading && !page.hasNext && !list.length && (
            <SpNote img='trades_empty.png'>列表页为空!</SpNote>
          )}
        </ScrollView>
      </View>

      <BackToTop show={showBackToTop} onClick={scrollBackToTop} bottom={150} />
    </View>
  )
}

export default MakeComment
